<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-15 20:33:46
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-11 09:21:09
 -->
<template>
  <div>
    <div class="padding10">
      <div class="clearfix">
        <div class="fl">
          {{ title }}
        </div>
        <div v-if="isShowOper" class="fr">
          <OperBtns
            @on-add="btnAddCat"
            @on-update="btnUpdateCat"
            @on-del="btnDelCat"
            @on-refresh="btnRefresh"
          />
        </div>
      </div>
    </div>
    <el-tree
      ref="treeNode"
      v-loading="loading"
      class="tree"
      node-key="id"
      :highlight-current="true"
      :data="cateTreedata"
      :props="defaultProps"
      :render-content="renderContent"
      :default-expand-all="true"
      :expand-on-click-node="false"
      v-on="$listeners"
      @node-click="handleNodeClick"
    />
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import OperBtns from './oper-btns'
import exportmix from './mixins/export-api.js'

export default {
  name: 'CateTree',
  components: { OperBtns },
  mixins: [oftenuse, exportmix],
  props: {
    /**
     * 标题
     */
    title: {
      type: String,
      default: ''
    },
    isShowOper: {
      type: Boolean,
      default: true
    },
    saveFun: {
      type: Function,
      default: () => {}
    },
    delFun: {
      type: Function,
      default: () => {}
    },
    listDataFun: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      cateData: [],
      loading: false,
      popover: {
        visible: false
      },
      currentNode: null,
      cateTreedata: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  computed: {
  },
  created() {
    this.listData().then(data => {
      this.$emit('on-load-success', data)
    })
  },
  methods: {
    btnAddCat() {
      this.addData()
    },
    btnUpdateCat() {
      this.updateData()
    },
    btnDelCat() {
      this.delData()
    },
    btnRefresh() {
      this.listData()
    },
    // api
    savePostData(params) {
      return new Promise((resolve, reject) => {
        this.saveFun(params).then(res => {
          resolve(res)
          this.listData(true)
          if (res.data.flag) {
            this.$notify.success('保存成功！')
          }
        }).catch(err => {
          this.$notify.error({ title: '保存异常！', message: err.message })
          reject(err)
        })
      })
    },
    delPostData(params) {
      return this.delFun(params).then(res => {
        if (res.data.flag) {
          this.currentNode = null
          this.$notify.success('删除成功！')
          this.listData(true)
        }
      })
    },
    cancleSelect() {
      this.currentNode = null
    },
    handleNodeClick(data) {
      this.currentNode = data
    },
    setCurrentNode(currentNode) {
      setTimeout(() => {
        this.$refs.treeNode.setCurrentKey(currentNode.id)
        this.currentNode = currentNode
      }, 200)
    },
    renderContent(h, { node, data, store }) {
      const { name, id } = data
      const currentNode = this.currentNode
      if (!currentNode) return <span>{name}</span>
      if (id !== currentNode.id) return <span>{name}</span>
      if (currentNode.edit) {
        const _this = this
        const data = {
          props: {
            size: 'mini'
          },
          attrs: {
            style: 'width:100px;'
          },
          on: {
            'blur': function(e) {
              const currentNode = _this.currentNode
              _this.$set(currentNode, 'edit', false)
              const params = {
                id: currentNode.id,
                pid: currentNode.pid,
                name: currentNode.name
              }
              _this.savePostData(params)
            }
          },
          model: {
            value: name,
            callback(value) {
              _this.$set(node.data, 'name', value)
            }
          }
        }
        return (
          <el-input {...data} />
        )
      } else {
        return (<span>{name}</span>)
      }
    }
  }
}

</script>
<style lang="scss" scoped>
.tree{
  /deep/.el-tree-node__content span{
    font-size: 12px;
  }
  /deep/.el-input__inner{
    height:24px;
  }
}
.table-oper-btns{
  /deep/button{
    padding: 2px;
  }
  /deep/.el-button+.el-button{
    margin-left:6px;
  }
}
</style>
